<template>
    <div class="infinite-scroll-container" v-infinite-scroll="handleLoadMore" :infinite-scroll-disabled="disabled"
        :infinite-scroll-distance="distance" :style="{ height: containerHeightValue }">
        <!-- 内容插槽 -->
        <slot></slot>
        <!-- 加载状态提示 -->
        <div class="loading-status">
            <p v-if="loading" class="loading-text">
                <i class="el-icon-loading"></i>
                <span>加载中...</span>
            </p>
            <!-- <p v-if="!loading && noMore" class="no-more-text">没有更多了</p> -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, computed, watch, defineProps, defineEmits, defineExpose, onUnmounted, onBeforeUnmount } from '@vue/composition-api'

const props = defineProps({
    // 是否正在加载
    loading: {
        type: Boolean,
        default: false
    },
    // 是否没有更多数据
    noMore: {
        type: Boolean,
        default: false
    },
    // 容器高度（支持数字和字符串，如 '500px' 或 '100%'）
    containerHeight: {
        type: [Number, String],
        default: 'auto'
    },
    // 触发加载的距离阈值(px)
    distance: {
        type: Number,
        default: 50
    },
    // 是否禁用无限滚动
    disabled: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['load-more']);

// // 监听 loading 状态变化
// watch(() => props.loading, (newVal) => {
//     console.log('loading 状态变化:', newVal);
// });

// // 监听 noMore 状态变化
// watch(() => props.noMore, (newVal) => {
//     console.log('noMore 状态变化:', newVal);
// });

// // 监听 disabled 状态变化
// watch(() => props.disabled, (newVal) => {
//     console.log('disabled 状态变化:', newVal);
// });

// 处理加载更多
const handleLoadMore = () => {
    console.log("props.loading=", props.loading, "props.noMore==", props.noMore, "props.disabled==", props.disabled)
    if (props.loading || props.noMore || props.disabled) return;
    emit('load-more');
};

// watch(() => props.containerHeight, (newVal) => {
//     console.log("containerHeight--=", newVal)
// }, { immediate: true })

// 计算高度值，如果是数字则添加px单位
const containerHeightValue = computed(() =>
    typeof props.containerHeight === 'number' ? `${props.containerHeight}px` : props.containerHeight
);

</script>

<style lang="scss" scoped>
.infinite-scroll-container {
    overflow-y: auto;
    box-sizing: border-box;

    .loading-status {
        text-align: center;
        padding: 10px 0;
        color: var(--text-secondary, #999);

        .loading-text {
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                margin-right: 5px;
                font-size: 16px;
                animation: rotating 1.5s linear infinite;
            }
        }

        .no-more-text {
            margin: 0;
        }
    }
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>